<template>
	<view class="Login">
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" @end="codeDis = false;" @start="codeDis = true;" ref="uCode" @change="codeChange"></u-code>
		<u-modal :title="agreeList[agreeIndex].title" :show="agreeShow" @confirm="agreeShow = false;" confirmText="我已阅读">
			<view class="slot-content">
				<view class="modal_scroll">
					<u-parse :content="agreeList[agreeIndex].content"></u-parse>
				</view>
			</view>
		</u-modal>
		<u-navbar :auto-back="true" leftIcon="close" title="登录代理商账号" :bg-color="bgColor"></u-navbar>
		<image class="login_bg" mode="widthFix" src="/static/agent_bg.png"></image>
		<view class="login_box">
			<view class="login_main">
				<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" :errorType="errorType"
					labelWidth="200rpx">
					<view class="login_form">
						<u-form-item label="账号" prop="username" borderBottom>
							<u--input v-model="form.username" border="none" placeholder="请输入代理商账号"></u--input>
						</u-form-item>
						<u-form-item label="密码" prop="password" borderBottom>
							<view class="flex_box">
								<u--input clearable v-model="form.password" :password="isSee" border="none"
									placeholder="请输入代理商密码"></u--input>
								<view @click="isSee=!isSee" class="flex_box flex_row_center forget_eye">
									<image v-if="isSee" class="forget_eye_icon" src="/static/eye1.png"></image>
									<image v-if="!isSee" class="forget_eye_icon" src="/static/eye2.png"></image>
								</view>
							</view>
						</u-form-item>
						<!-- <u-form-item label="验证码" prop="code" borderBottom>
							<u--input v-model="form.code" border="none" placeholder="请输入验证码"></u--input>
							<u-button throttleTime="1000" slot="right" @click="getCode" :text="tips" :customStyle="codeBtn" color="#0FBCF9" shape="circle" :disabled="codeDis"></u-button>
						</u-form-item> -->
					</view>
					<!-- <view class="flex_box login_agree">
						<view @click="agreeStatus = !agreeStatus;" class="flex_box login_agree_main">
							<view class="login_agree_dot"></view>
							<u-checkbox-group>
								<u-checkbox size="24rpx" :checked="agreeStatus" activeColor="#0FBCF9" shape="circle"></u-checkbox>
							</u-checkbox-group>
							<view class="login_agree_text">阅读并同意<text @tap.stop="showAgree(0)">《用户协议》</text>和<text @tap.stop="showAgree(1)">《隐私权政策》</text></view>
						</view>
					</view> -->
					<view class="login_btn">
						<u-button throttleTime="1000" color="#45B9A2" shape="circle" :customStyle="btnStyle" @click="submit" text="登录"></u-button>
					</view>
					<!-- <u-divider line-color="#45B9A2" text-color="#45B9A2" text="第三方登录"></u-divider>
					<view class="flex_box flex_row_center">
						<u-image width="68rpx" height="68rpx" src="/static/wx.png" @click="wxLogin"></u-image>
					</view> -->
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	import { agentLogin, sendCode, getAbout} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				isSee: true,
				bgColor: 'transparent',
				form: {
					username: '',
					code: "",
					password: ""
				},
				errorType: "toast",
				rules: {
					username: [{
							type: 'string',
							required: true,
							message: '请输入代理商账号',
							trigger: ['blur', 'change']
						},
					],
					password: [{
							type: 'string',
							required: true,
							message: '请输入代理商密码',
							trigger: ['blur', 'change']
						},
					],
				},
				btnStyle: {
					height: '88rpx',
				},
				codeBtn: {
					width: '188rpx',
					height: '58rpx',
				},
				tips: '',
				seconds: 10,
				codeDis: false,
				agreeStatus: false,
				agreeIndex: 0,
				agreeShow: false,
				agreeList: [
					{
						title: "用户协议",
						content: "用户协议内容"
					},
					{
						title: "隐私权政策",
						content: "隐私权政策内容"
					}
				]
			}
		},
		onLoad() {
			that = this;
			// that.getAbout();
		},
		onShow() {
			// that.getAppInfo(0);
		},
		onReady() {
			that.$refs.uForm.setRules(that.rules);
		},
		onPageScroll(e) {
			that.bgColor = e.scrollTop > 40 ? '#45B9A2' : 'transparent';
		},
		methods: {
			getAbout() {
				getAbout()
					.then(res => {
						that.info = res.data;
						that.agreeList[0].content = res.data.agreement;
						that.agreeList[1].content = res.data.privacy;
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			getUserInfo(e){
				console.log(e)
			},
			submit() {
				that.$refs.uForm.validate().then(res => {
					// if(!that.agreeStatus){
					// 	uni.$u.toast('请阅读并同意登录协议');
					// 	return;
					// }
					agentLogin(that.form).then(res=>{
						uni.$u.vuex("agentInfo", res.data);
						that.$refs.uToast.show({
							type: "success",
							message: "登录成功",
							complete(){
								uni.redirectTo({
									url: '/pages/mine/agent/agent'
								})
							}
						});
					}).catch(err=>{
						uni.$u.toast(err.msg);
					});
				}).catch(errors => {

				})
			},
			// 获取验证码
			codeChange(text) {
				that.tips = text;
			},
			getCode() {
				if(that.form.username==''){
					uni.$u.toast('请输入您的手机号');
					return;
				}
				if(!uni.$u.test.mobile(that.form.username)){
					uni.$u.toast('您输入的手机号不正确');
					return;
				}
				if(that.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});
					sendCode({mobile: that.form.username}).then(res=>{
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						that.$refs.uCode.start();
					}).catch(err=>{
						uni.$u.toast(err.msg);
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 切换登录方式
			changeType(){
				that.form.type = that.form.type == 1 ? 2 : 1;
				that.$refs.uCode.reset(),that.tips = '获取验证码',that.codeDis = false,that.form.code = '',that.form.password = '';
			},
			// 查看协议
			showAgree(e){
				that.agreeIndex = e,that.agreeShow = true;
			},
			wxLogin(){
				if(!that.agreeStatus){
					uni.$u.toast('请阅读并同意登录协议');
					return;
				}
				let aweixin = null;
				plus.oauth.getServices(function(services){
				    services.forEach((item)=>{
				        if(item.id=='weixin'){
				            aweixin = item;
				        }
				    })
					//没有取得微信登陆的服务
				    if(!aweixin){uni.$u.toast('当前环境不支持微信登录');return;}
				    if(!aweixin.authResult){
						//是否登录认证过
				        aweixin.authorize((e)=>{
							wxLoginAndRegister({code: e.code}).then(res=>{
								uni.$u.vuex("loginInfo", res.data.userinfo);
								if(res.data && res.data.userinfo  && res.data.userinfo.mobile){
									//已绑定手机
									that.$refs.uToast.show({
										type: "success",
										message: "登录成功",
										complete(){
											that.$goUrl("/pages/home/index/index","tab");
										}
									});
								}else{
									//去绑定手机
									that.$goUrl('/pages/login/bindPhone/bindPhone','to');
								}
							}).catch((err)=>{
								uni.$u.toast(err.msg);
							})
				        },(e)=>{
						  uni.$u.toast('用户取消授权');
				        },{scope:'snsapi_userinfo',state:''})
				    }else{
						uni.$u.toast('请使用其他登录方式');
				    }
				}, function(e){
					uni.$u.toast('获取登录授权服务列表失败');
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Login {
		min-height: 100vh;
		background-color: #F6F8FA;
		.login_bg{
			width: 100%;
		}
		.login_box {
			position: relative;
			z-index: 2;
			padding: 0 36rpx;
			.login_logo{
				padding: 24rpx 36rpx;
				.login_title {
					font-size: 28rpx;
					font-weight: bold;
					color: #ffffff;
					line-height: 88rpx;
				}
			}
			.login_main{
				border-radius: 36rpx;
				padding: 0 36rpx;
				.login_tip{
					font-size: 40rpx;
					color: #1E272E;
					font-weight: bold;
					line-height: 60rpx;
					margin-bottom: 60rpx;
				}
				.login_form ::v-deep {
					.u-form-item__body__left__content__label{
						font-weight: 500;
						color: #1E272E;
						font-size: 32rpx;
						padding: 20rpx 0;
					}
					.uni-input-input{
						font-weight: bold;
						color: #1E272E;
						font-size: 32rpx;
					}
					.uni-input-placeholder{
						font-weight: 500;
						color: #D2DAE2;
						font-size: 32rpx;
					}
					.u-line{
						border-bottom: 2rpx solid #1E272E !important;
					}
				}
				.forget_eye {
					flex-shrink: 0;
					width: 100rpx;
					height: 40rpx;
					border-left: 1rpx solid #e9e9e9;
				
					.forget_eye_icon {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
			.login_agree{
				padding: 40rpx 0 60rpx;
				.login_agree_main{
					position: relative;
					.login_agree_dot{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						width: 40rpx;
						height: 40rpx;
					}
					.login_agree_text{
						font-size: 26rpx;
						text{
							color: #0FBCF9;
						}
					}
				}
			}
			.login_down{
				font-size: 28rpx;
				color: #1E272E;
				font-weight: 500;
				width: 240rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin: 20rpx auto 40rpx;
				text-align: center;
			}
			.login_btn{
				padding: 100rpx 0 50rpx;
			}
		}
		.modal_scroll{
			max-height: 720rpx;
			overflow-y: scroll;
		}
	}
</style>
